<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://1stjs.googlecode.com/svn/trunk/fw4/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</meta>
<title>动画演示</title>
<style type="text/css">
.box{width:300px;}
.bg{border:1px solid #aaa; width:300px; height:20px; background-color:#666; color:#fff; position:relative;}
.txt{position:absolute; left:0; top:0; width:100%; height:20px; text-align:center;}
.bar{position:absolute; left:0; top:0; height:20px;}

.ball{float:left; border:1px solid #ccc; margin:10px;}
.color{width:30px; height:30px; background-color:#FF0; opacity:0; display:block;}
</style>
<script type="text/javascript" src="1st.js"></script>
</head>
<body bgcolor="#888">

用途一、进度条：
<div class="box">
	<div style="text-align:center;">Loadding...</div>
	<div class="bg">
		<div id="pbar" class="bar" style="background-color:#222; width:0;"></div>
		<div id="ptxt" class="txt"></div>		
	</div>
</div>

<br/><br/>

用途二、倒计时：
<div class="bg">
	<div id="rbar" class="bar" style="background-color:red; width:300px;"></div>
	<div id="rtxt" class="txt"></div>	
</div>

<br/><br/>

用途三、红绿灯：
<div id="balls">
	<div class="ball">
		<span class="color" style="background-color:red;"></span>
	</div>
	<div class="ball">
		<span class="color" style="background-color:green;"></span>
	</div>
	<div class="ball">
		<span class="color" style="background-color:yellow;"></span>
	</div>
</div>

<script type="text/javascript">
//显示进度
var showProgress = function(box){
	box.next().html(Math.floor(box.width()/300*100)+"%");
};
F("pbar").anime({width:300, duration:2000, running:showProgress});
F("rbar").anime({width:0, duration:3000, type:"Linear", running:showProgress});

//亮灯
function tuneLight(){
	++i;
	if(i>=balls.len){
		i = 0;	
	}
	balls.item(i).anime({opacity:1, type:"slowIn", daration:5000, after:tuneDark});
}

//关灯
function tuneDark(){
	balls.item(i).anime({opacity:0,after:tuneLight});
}

var balls = F("balls").tags("span");
var i=-1;
tuneLight();
</script>
</body>
</html>